<template>
  <div class="Component-panel-Dialog">
    <el-dialog
      title="提示"
      v-model="Dialogboolean"
      top="30vh"
      :show-close = "false"
      :close-on-click-modal="false"
      @close="closes"
    >
      <span :style="Speanstyles" class="Component-panel-span" style="text-align: left; text-indent: 50px; margin: 0 auto;">{{ Msg }}</span>
      <template #footer>
      <div class="dialog-footer">
        <el-button @click="Ready" :style="Buttonstyle">{{
          Buttonname
        }}</el-button>
        <el-button @click="Cancels">取 消</el-button>
      </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, reactive, toRef, toRefs } from "vue";
export default defineComponent({
  name: "DialogComponents",
  components: {},
  props: {
    DialogComponent: {
      type: Object,
      default: "",
    },
  },
  setup(props,context) {
    let { Dialogboolean,Speanstyles,Msg,Buttonstyle,Buttonname } = toRefs(props.DialogComponent)
    function Ready() {
      context.emit("click", "Ready");
    }
    function Cancels() {
      context.emit("click", "Cancel");
    }
    function closes() {
      Dialogboolean = false
    }
    return {
      Ready,
      Cancels,
      closes,
      Dialogboolean,
      Speanstyles,
      Buttonstyle,
      Buttonname,
      Msg
    };
  },
});
</script>
<style lang="less">
.dialog-footer {
  margin-top: 5%;
}
/* 弹出框的宽高度 */
.Component-panel-Dialog .el-dialog {
  width: 640px !important;
  height: 380px;
  border-radius: 20px;
  // margin-top: 30vh;
}
.Component-panel-Dialog .el-input__inner {
  width: 460px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1b1b1d;
}
.Component-panel-Dialog .el-dialog__body {
  padding: 100px 0px 0px 0px;
}
.Component-panel-Dialog .el-dialog__footer {
  padding: 65px 20px 20px 90px;
}

.Component-panel-Dialog .el-dialog__title {
  position: absolute;
  left: -25px;
  top: 25px;
  width: 149px;
  height: 23px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #81859c;
}

.Component-panel-Dialog .el-button {
  width: 200px;
  height: 60px;
  margin-right: 60px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  border-radius: 10px;
}
.Component-panel-Dialog .el-form-item__label {
  width: 42px;
  height: 17px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
}
.Component-panel-Dialog .el-button span {
  color: #ffffff;
}
.Component-panel-span{
  // width: 100% ;
  width: 540px !important;
  // width: 80% !important;
  height:30px;
  // height:90px;
  // background-color: pink;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #81859c;
  // line-height: 56px;
  line-height: 35px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Component-panel-Dialog .el-button:nth-child(2) {
  background: #81859c;
}
</style>
